css之三栏布局 |
您所在的位置：网站首页 › css 3 › css之三栏布局 |
css之三栏布局
|
1.通过float left 和相对width实现
css三栏布局之float left与 相对width
.block1,.block2,.block3{
float:left;
width:32%;
height:50px;
border:1px dashed #F00;
margin:2px;
}
.block1{background-color:red;}
.block2{background-color:blue;}
.block3{background-color:#ffe6b8;}
block1
block2
block3
2.绝对定位，通过absolute 定位使其脱离文档流，可以自适应定义三栏宽度 三栏布局css之绝对定位 .left,.right{width: 200px;height: 200px; position: absolute;} .left{left:10px;background-color: red;} .right{right:10px;background-color: blue;} .center{margin:2px 210px ;background-color: yellow;height: 200px; } left right center
3.使用自身浮动，float left 和float right 三栏布局css之使用自身浮动 .left,.right{width: 200px;height: 200px;} .left{float:left;background-color: red;} .right{float:right;background-color: blue;} .center{margin:2px 210px ;background-color: yellow;height: 200px; } left right center
|
![这里写图片描述](/uploadfile/Collfiles/20170506/20170506091731668.png "\")
![这里写图片描述](/uploadfile/Collfiles/20170506/20170506091731669.png "\")
【本文地址】
今日新闻 |
推荐新闻 |